<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>蠢货们的聊天室</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body {
            width: 100%;
            height: auto;
        }
        #main {
            position: relative;
            left: 50%;
            margin-left: -375px;
            top: 50px;
            width: 750px;
            height: 450px;
            background: #EEE;
        }
        #left-list {
            float: left;
            display: block;
            list-style:none;
            width: 150px;
            height: 100%;
            background:#104E8B;
        }
        #left-list li {
            float: left;
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: left;
            color: #FFF;
            margin-top: 1rem;
            cursor: pointer;
        }
        #left-list li span, #left-list li div{
            display: inline-block;
            margin-left: 5px;
        }
        #right-list {
            float: left;
            width:600px;
            height: 450px;
            background: #EEE;
        }
        nav {
            float: left;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #DDD;
            text-align: left;
            text-indent:1rem;
            color: #333;
        }
        #view {
            float: left;
            width: 100%;
            height: 280px;
        }
        #text {
            float: left;
            width: 590px;
            height: 83px;
            resize: none;
            background: #DDD;
            padding-left: 10px;
            padding-top: 5px;
            border-top: 2px solid #AAA;
            font-size: 15px;
        }
        .submit {
            float: left;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: right;
        }
        .submit i {
            display: block;
            float: right;
            line-height: 40px;
            font-size: 14px;
            color: #333;
            width:auto;
            height: 100%;
            margin-right: 1rem;
        }
        #sub {
            display: block;
            float: right;
            margin-top: 5px;
            width:60px;
            height: 26px;
            margin-right: 1rem;
            cursor: pointer;
            background: #104E8B;
            color: white;
        }
        .mess-block {
            float: left;
            width: 100%;
            height: auto;
            min-height: 30px;
            line-height: 30px;
            font-size: 15px;
            text-indent:5px;
            margin-top: 5px;
            font-weight: normal;
        }
        .mess-block div {
            display: inline-block;
            float: left;
            color: #104E8B;
            height: 100%;
            width: 90px;
            vertical-align: top;
            /* word-wrap:break-word; */
            overflow:hidden;
            white-space:nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
        .mess-block p {
            display: inline-block;
            float: left;
            min-height: 30px;
            /* background: white; */
            word-wrap:break-word;
            width: 480px;
            border: 3px solid #CCC;
            font-weight: normal;
        }
        .lap {
            float: left;
            width:auto;
            height: 280px;
            border: 0;
            overflow-y: scroll;
        }
        </style>
    </head>
    <body>
        <div id="main">
            <ul id="left-list">
            </ul>
            <div id="right-list">
                <nav>小明 - 10086</nav>
                <div id="view">
                    <div class="lap">
                    </div>
                </div>
                <textarea id="text"></textarea>
                <div class="submit">
                    <button type="button" id="sub">发送</button>
                    <i>Ctrl + Enter 发送</i>
                </div>
            </div>
        </div>
    </body>

    <script>
    Call = function(json) {
        if (window.XMLHttpRequest)
            var xhr = new XMLHttpRequest();
        else
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        if (json.cover) {
            this.cover("on");
        }
        xhr.ontimeout = function() {
            throw new Error('sugar request timeout');
        }
        var dStr = "";
        let datakey;
        for (datakey in json.data) {
            dStr += "&"+ datakey+ "="+ json.data[datakey];
        }
        var method = json.method.toUpperCase();
        if (method == "GET") {
            /**
                * assembling url params
                */
            if (json.url.indexOf("?") < 0) {
                json.url = json.url + "?" + dStr.substr(1);
            } else {
                json.url = json.url + dStr;
            }
        }
        xhr.open(method, json.url, true);
        try {
            xhr.withCredentials = json.withCookie == false ? false : true;
        } catch (e) {
            xhr.withCredentials = false;
        }
        var defaultType = "application/x-www-form-urlencoded;charset=UTF-8";
        xhr.setRequestHeader("Accept", "application/json");
        xhr.setRequestHeader("Content-Type", defaultType);
        xhr.responseType = json.type;
        let key;
        for (key in json.headers) {
            xhr.setRequestHeader(key, json.headers[key]);
        }
        if (method == "GET") {
            xhr.send(null);
        } else {
            let subst = dStr;
            xhr.send(subst);
        }
        var that = this;
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    if (json.cover) {
                        that.cover("off");
                    }
                    let calldata = xhr.response == "undefined" ? xhr.responseText : xhr.response;
                    json.success(calldata);
                    return 0;
                }
            }
        }
    };

    var Env = new Object();
    Env.socket = new Object();
    Env.lap = new Object();
    var uname;
    var setName = function() {
        var swap = prompt("请输入你的名字", "");
        if (/^[\s]+$/.test(swap)) {
            alert("不允许使用空格");
            return setName();
        }
        if (swap == "" || swap == null) {
            alert("特么滴请输入你的名字");
            return setName();
        }
        uname = swap;
    };
    setName();

    var Addtimer = function(gid) {
        var s = document.querySelector("li[room='"+ gid +"'] span");
        var num = s.attributes.num.value;
        s.setAttribute("num", parseInt(num)+1);
        s.innerText = "("+ s.attributes.num.value +")"
    };

    var ClearTimer = function() {
        var s = document.querySelector("li[room='"+ Env.now +"'] span");
        s.setAttribute("num", 0);
        s.innerText = "(0)";
    };

    var Selc = function(e) {
        var r = this.attributes.room.value;
        Env.now = r;
        var li = document.querySelectorAll("li");
        for (var i = 0; i < li.length; i++) {
            li[i].style.background = "#104E8B";
        }
        this.style.background = "#6495ED";
        var s = document.querySelectorAll(".lap");
        for (var i = 0; i < s.length; i++) {
            s[i].style.display = "none";
        }
        document.querySelector(".lap[room='"+r+"']").style.display = "block";
        ClearTimer();
        var nav = document.querySelector("#right-list nav");
        nav.innerText = uname + " - "+ r;
        document.getElementById("text").focus();
    };


    var left = document.getElementById("left-list");
    Call({
        url: "/roomlist",
        method: "GET",
        type: "json",
        data: {
            mark: "null"
        },
        success: function(data) {
            var once;
            var n = 1;
            var ws;
            for (once in data) {
                // 展示框
                var view = document.createElement("div");
                view.className = "lap";
                view.setAttribute("room", data[once]["room"]);
                document.getElementById("view").appendChild(view);
                // 左蓝
                var li = document.createElement("li");
                li.setAttribute("room", data[once]["room"]);
                li.onclick = Selc;
                li.value = n;
                n++;
                var room = document.createElement("div");
                room.innerText = " 房间 "+ data[once]["room"];
                var reader = document.createElement("span");
                reader.innerText = "(0)";
                reader.setAttribute("num", 0);
                li.appendChild(room);
                li.appendChild(reader);
                left.appendChild(li);
                // 连接
                Env.lap[data[once]["room"]] = document.querySelector(".lap[room='"+ data[once]["room"] +"']");
                Env.socket[data[once]["room"]] = new WebSocket("ws://119.28.21.49:8080/hicq?gid="+ data[once]["room"] +"&uname="+ uname);
                Env.socket[data[once]["room"]].onmessage = function(event) {
                    var data = JSON.parse(event.data);
                    if (data.code != 0) {
                        alert(data.mess);
                        return 0;
                    }
                    var sp = document.createElement("span");
                    sp.className = "mess-block";
                    var d = document.createElement("div");
                    d.innerText = data.uname;
                    var p = document.createElement("p");
                    p.innerText = data.mess;
                    sp.appendChild(d);
                    sp.appendChild(p);
                    Env.lap[data.gid].appendChild(sp);
                    Env.lap[data.gid].scrollTop = Env.lap[data.gid].scrollHeight;
                    if (Env.now != data.gid) {
                        Addtimer(data.gid);
                    }
                };
            }
            var v1 = document.querySelector("li[value='1']");
            v1.click();
            // 提交
            var sub = document.getElementById("sub");
            sub.onclick = function(e) {
                var room = Env.now;
                var text = document.getElementById("text");
                if (text.value == "") {
                    alert("蠢货, 你倒是写点什么啊");
                    return 0;
                }
                if (text.value.length > 1024) {
                    alert("蠢货，你特么发那么多字找死啊");
                    return 0;
                }
                var sendform = {
                    uname: uname,
                    text: text.value
                };
                Env.socket[room].send(JSON.stringify(sendform));
                text.value = null;
                text.focus();
            };
            // enter submit
            document.onkeydown = function(event) {
                if(event.ctrlKey && event.keyCode == 13) {
                    sub.click();
                }
            };
        }
    });  // end Call
    </script>
</html>